import { useState } from 'preact/hooks';

export default function Settings() {
  const [settings, setSettings] = useState({
    deviceName: 'HPM5E-EC-DEV',
    autoConnect: true,
    refreshInterval: 1,
  });

  const handleChange = (key, value) => {
    setSettings(prev => ({
      ...prev,
      [key]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里可以添加保存设置的逻辑
    alert('设置已保存');
  };

  return (
    <div class="h-full">
      <div class="flex justify-between items-center mb-6">
        <h1 class="text-xl font-medium text-gray-800 flex items-center">
          <div class="w-1 h-5 bg-blue-500 mr-3"></div>
          控制面板设置
        </h1>
      </div>

      <form onSubmit={handleSubmit} class="space-y-6">
        <div class="bg-white rounded-lg shadow-md p-6">
          <h2 class="text-xl font-semibold text-gray-700 mb-4">基本设置</h2>
          
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">
                设备名称
              </label>
              <input
                type="text"
                value={settings.deviceName}
                onChange={(e) => handleChange('deviceName', e.currentTarget.value)}
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

            <div>
              <label class="flex items-center space-x-2">
                <input
                  type="checkbox"
                  checked={settings.autoConnect}
                  onChange={(e) => handleChange('autoConnect', e.currentTarget.checked)}
                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
                <span class="text-sm font-medium text-gray-700">自动连接设备</span>
              </label>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">
                刷新间隔（秒）
              </label>
              <input
                type="number"
                min="1"
                max="60"
                value={settings.refreshInterval}
                onChange={(e) => handleChange('refreshInterval', parseInt(e.currentTarget.value))}
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>
          </div>
        </div>

        <div class="flex justify-end">
          <button
            type="submit"
            class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          >
            保存设置
          </button>
        </div>
      </form>
    </div>
  );
} 